<template>
  <div>
    <div class="buttons">
      <vxe-button @click="addAsset">新增资产</vxe-button>
      <vxe-button @click="delAsset">删除资产</vxe-button>
      <vxe-button @click="saveAsset">保存</vxe-button>
    </div>
    <div>
      <vxe-table :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell' }"
                 :checkbox-config="{ highlight: true }"
                 @checkbox-change="changeAsset">
        <vxe-table-column type="checkbox" width="60"></vxe-table-column>
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="priority" title="优先级" :edit-render="{
                                immediate: true,
                                name: '$select',
                                props: {type: 'select'},
                                options: priorityOptions,
                                events: {
                                }
        }">
        </vxe-table-column>
        <vxe-table-column field="content" title="代办项" :edit-render="{
                                immediate: true,
                                 name: 'input',
                                attrs: {type: 'text'}
        }">
        </vxe-table-column>
        <vxe-table-column field="status" title="状态" :edit-render="{
                                immediate: true,
                                 name: '$select',
                                props: {type: 'select'},
                                options: statusOptions,
                                events: {
                                }
        }">
        </vxe-table-column>
        <vxe-table-column field="time" title="日期" :edit-render="{
                                immediate: true,
                                 name: '$input',
                                props:{type:'date'},
                                events: {
                                }
                              }">
          <template v-slot="{ row }">
            <span class="vxe-cell--label">{{(row.time) ? $moment(row.time).format('YYYY-MM-DD') : ''}}</span>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';

// import dayjs from '@/utils/dayjs'

export default {
  name: "TodoList",
  data() {
    return {
      priorityOptions: [
        {label: '高', value: '高'},
        {label: '中', value: '中'},
        {label: '低', value: '低'},
      ],
      statusOptions:[
          {label: '未完成', value: '未完成'},
          {label: '已完成', value: '已完成'}
      ],
      tableData: [
        {priority: '高', content: '代办项1', status: '未完成', time: '2025-04-11 00:00:00'},
        {priority: '中', content: '代办项2', status: '未完成', time: '2025-05-01 00:00:00'},
      ],
      selectedData: [],
    }
  },
  mounted() {
    this.loadData();
  },
  computed: {},
  methods: {
    addAsset() {
      this.tableData.push({seq: this.tableData.length + 1})
    },
    delAsset() {
      this.tableData = this.tableData.filter(item => {
        return !this.selectedData.includes(item)
      });
    },
    changeAsset({records}) {
      this.selectedData = records;
      console.log('rows', JSON.stringify(records))
    },
    loadData() {
      // const utcToLocalFilter = this.$options.filters.utcToLocal;
      request({
        url: '/todo',
        method: 'get',
      }).then(response => {
        if (response && response.data) {
          const tempList = [];
          response.data.records.forEach(item => {
            tempList.push({
              priority: item.todoPrority,
              content: item.todoName,
              status: item.todoStatus,
              time: item.todoDate
              // time: utcToLocalFilter(item.todoDate)
            })
          })
          this.tableData = tempList;
        }
      }).catch(error => {
        console.log('error', error);
        this.$message.error('加载数据失败')
      })
    },
    saveAsset() {
      const self = this;
      const tempList = [];
      self.tableData.forEach(item => {
        tempList.push({
          todoName: item.content,
          todoPrority: item.priority,
          todoStatus: item.status,
          todoDate: item.time
          // todoDate: dayjs(item.time).utc().format('YYYY-MM-DD HH:mm:ss')
        })
      })
      request({
        url: '/todo/batch',
        method: 'post',
        data: tempList
      }).then(response => {
        if (response && response.data) {
          this.$message.success('保存成功')
        }
      }).catch(error => {
        console.log('error', error);
        this.$message.error('保存失败')
      })
    },
  },
}
</script>

<style scoped>
.buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

</style>